<template>
  <Dialog ref="dialog" width="1000" title="网站信息">
    <el-form
      ref="ruleFormRef"
      :model="stroeInfo"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="标题" prop="webTitle">
          <el-input
            v-model="stroeInfo.webTitle"
            placeholder="请输入标题"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="版权" prop="copyright">
          <el-input
            v-model="stroeInfo.copyright"
            placeholder="请输入版权"
            clearable
          />
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="图标" prop="icon">
          <ImageUploadNew
            :limit="1"
            :modelValue="iconModelValueList"
            @update:modelValue="iconModelValue"
          ></ImageUploadNew>
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="二维码" prop="icon">
          <ImageUploadNew
            :limit="1"
            :modelValue="codeModelValueList"
            @update:modelValue="codenModelValue"
          ></ImageUploadNew>
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="Logo" prop="logo">
          <ImageUploadNew
            :limit="1"
            :modelValue="logoModelValueList"
            @update:modelValue="logoModelValue"
          ></ImageUploadNew>
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="SmallLogo"
          prop="smalllogo"
        >
          <ImageUploadNew
            :limit="1"
            :modelValue="smalllogoModelValueList"
            @update:modelValue="smalllogoModelValue"
          ></ImageUploadNew>
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item
          class="form_item el-col-10"
          label="微信小程序名称"
          prop="wxappname"
        >
          <el-input
            v-model="stroeInfo.wxappname"
            placeholder="请输入微信小程序名称"
            clearable
          />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="app名称"
          prop="appname"
        >
          <el-input
            v-model="stroeInfo.appname"
            placeholder="请输入app名称"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item
          class="form_item el-col-10"
          label="App地址"
          prop="appdownaddr"
        >
          <el-input
            v-model="stroeInfo.appdownaddr"
            placeholder="请输入App下载地址"
            clearable
          />
        </el-form-item> -->
        <el-form-item
          class="form_item el-col-10"
          label="App地址"
          prop="appdownaddr"
        >
          <el-input
            v-model="stroeInfo.appdownaddr"
            placeholder="请输入App下载地址"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="H5地址" prop="h5addr">
          <el-input
            v-model="stroeInfo.h5addr"
            placeholder="请输入H5地址"
            clearable
          />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="小程序地址"
          prop="xcxaddr"
        >
          <el-input
            v-model="stroeInfo.xcxaddr"
            placeholder="请输入小程序地址"
            clearable
          />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="官网地址"
          prop="gwaddr"
        >
          <el-input
            v-model="stroeInfo.gwaddr"
            placeholder="请输入官网地址"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="交流群" prop="group">
          <el-input
            v-model="stroeInfo.jiaoliuqun"
            placeholder="请输入交流群地址"
            clearable
          />
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item
          class="form_item el-col-10"
          label="电话"
          v-for="(item, index) in stroeInfo.kefumobile"
        >
          <div class="row alitem" style="width: 100%">
            <el-input
              v-model="stroeInfo.kefumobile[index]"
              placeholder="请输入电话"
              clearable
            />
            &nbsp;&nbsp;
            <el-icon @click="onClickDelPhone(index)">
              <Delete />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item class="form_item el-col-10" label=" ">
          <el-button @click="onClickAddPhone">添加电话</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-divider />
    <div class="right">
      <el-button class="height40" @click="closeChange">取消</el-button>
      <el-button type="primary" class="height40" @click="submit"
        >提交</el-button
      >
    </div>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ElMessage } from 'element-plus';
import { getStroeInfo, saveStoreInfo } from '@/api/appv2/appv2';
import { ref } from 'vue';

let { proxy } = getCurrentInstance();
const dialog = ref(null);
const rules = {
  webTitle: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入标题',
    },
  ],
  copyright: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入版权',
    },
  ],
};

// 网站信息
const stroeInfo = ref({});

const iconModelValueList = ref([]);
const groupModelValueList = ref([]);
const logoModelValueList = ref([]);
const codeModelValueList = ref([]);
const smalllogoModelValueList = ref([]);
const codenModelValue = (val) => {
  stroeInfo.value.qrUrl = val; // 保存单张图片
};

const iconModelValue = (val) => {
  stroeInfo.value.webFavicon = val; // 保存单张图片
};
const logoModelValue = (val) => {
  stroeInfo.value.webLogo = val; // 保存单张图片
};
const smalllogoModelValue = (val) => {
  stroeInfo.value.websmallLog = val; // 保存单张图片
};

// 删除电话
function onClickDelPhone(index) {
  stroeInfo.value.kefumobile.splice(index, 1);
}
// 添加电话
function onClickAddPhone() {
  stroeInfo.value.kefumobile.push('');
}
// 提交
function submit() {
  stroeInfo.value.kefumobile =
    stroeInfo.value.kefumobile &&
    stroeInfo.value.kefumobile.filter((item) => item != '');
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      saveStoreInfo({
        ...stroeInfo.value,
        kefumobile: stroeInfo.value.kefumobile.join(','),
      }).then(() => {
        ElMessage.success('保存成功');
        dialog.value.closeChange();
      });
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}

// 打开弹窗
function openchange(val) {
  iconModelValueList.value = [];
  groupModelValueList.value = [];
  logoModelValueList.value = [];
  smalllogoModelValueList.value = [];
  codeModelValueList.value = [];
  stroeInfo.value = [];

  // 以后上传图片组件可能需要一个id，就是所在列表的id
  localStorage.setItem('imageValId', val.id);

  getStroeInfo({
    id: val.id,
  }).then((res) => {
    if (res.data) {
      stroeInfo.value = res.data;
      iconModelValueList.value = stroeInfo.value.webFavicon
        ? [stroeInfo.value.webFavicon]
        : [];
      groupModelValueList.value = stroeInfo.value.jiaoliuqun
        ? [stroeInfo.value.jiaoliuqun]
        : [];
      logoModelValueList.value = stroeInfo.value.webLogo
        ? [stroeInfo.value.webLogo]
        : [];
      smalllogoModelValueList.value = stroeInfo.value.websmallLog
        ? [stroeInfo.value.websmallLog]
        : [];
      codeModelValueList.value = stroeInfo.value.qrUrl
        ? [stroeInfo.value.qrUrl]
        : [];
    }
  });

  dialog.value.openChange();
}
// 关闭弹窗
function closeChange() {
  dialog.value.closeChange();
}
defineExpose({
  openchange,
});
</script>

<style scoped>
::v-deep(.el-upload--picture-card) {
  width: 70px;
  height: 70px;
}

::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 70px;
  height: 70px;
}

.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}
</style>
